<template>
    <a-modal :visible="visible" :title="sensitiveInfo.id ? '编辑风险词' : '自定义风险词'" :width="500" @cancel="handleClose"
        :maskClosable="false">
        <a-form ref="formRef" :model="sensitiveForm" :rules="rules" layout="vertical">
            <a-form-item name="word" style="margin-bottom: 0 !important;">
                <!-- <a-input v-model:value="sensitiveForm.word" placeholder="请输入" /> -->
                <div class="textarea-box">
                    <a-textarea :bordered="false" class="textarea" v-model:value="sensitiveForm.word"
                        placeholder="请输入风险词" :auto-size="{ minRows: 6, maxRows: 10 }" show-count
                        :maxlength="200"></a-textarea>
                    <div class="tip_text" v-if="!sensitiveInfo.id"><question-circle-outlined style="margin-right: 5px;" />风险词之间用分号、逗号隔开</div>
                </div>
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button @click="handleClose">取消</a-button>
            <a-button type="primary" @click="handleSubmit" :loading="submLoading">确定</a-button>
        </template>
    </a-modal>
</template>

<script>
import {
    defineComponent,
    reactive,
    toRefs,
    ref,
    watch
} from 'vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import {
    message
} from 'ant-design-vue';
import request from '@/common/utils/request.js';
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
export default defineComponent({
    emits: ['close'],
    components: {
        QuestionCircleOutlined,
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        sensitiveInfo: {
            type: Object,
            default: () => { return {} }
        }
    },
    setup(props, context) {
        const formRef = ref()
        const state = reactive({
            sensitiveForm: {
                word: '',
            },
            rules: {
                word: [{
                    required: true,
                    message: '请输入风险词'
                }]
            },
            submLoading: false
        })

        const handleSubmit = () => {
            formRef.value.validate().then(() => {
                if (state.sensitiveForm.word.trim().length <= 0) {
                    return message.warning('风险词不能为空')
                }
                if (props.sensitiveInfo.id) {
                    const regex = /^[\u4e00-\u9fa5a-zA-Z0-9\s]+$/u;
                    console.log(regex.test(state.sensitiveForm.word))
                    if (!regex.test(state.sensitiveForm.word)) {
                        return message.warning('风险词不能包含特殊字符')
                    }
                    state.submLoading = true
                    request.put('/work_ai', '/user/shotstack/banned/update', { ...state.sensitiveForm, id: props.sensitiveInfo.id }).then(res => {
                        clearForm()
                        formRef.value.resetFields();
                        message.success('更新成功！')
                        context.emit('close', true)
                        state.submLoading = false
                    }).catch(err => {
                        state.submLoading = false
                    })
                } else {
                    const regex = /^[\u4e00-\u9fa5a-zA-Z0-9,，;；\s]+$/u;
                    if (!regex.test(state.sensitiveForm.word)) {
                        return message.warning('风险词不能包含特殊字符')
                    }
                    state.submLoading = true
                    request.post('/work_ai', '/user/shotstack/banned/add', { ...state.sensitiveForm }).then(res => {
                        clearForm()
                        formRef.value.resetFields();
                        message.success('添加成功！')
                        context.emit('close', true)
                        state.submLoading = false
                    }).catch(err => {
                        state.submLoading = false
                    })
                }
            })
        }

        const clearForm = () => {
            state.sensitiveForm = {
                word: '',
            }
        }

        const handleClose = () => {
            formRef.value.resetFields();
            clearForm()
            context.emit('close')
        }

        watch(() => props.visible, val => {
            if (val && props.sensitiveInfo.id) {
                Object.assign(state.sensitiveForm, props.sensitiveInfo)
            }
        })

        return {
            ...toRefs(state),
            handleSubmit,
            handleClose,
            formRef
        }
    }
})
</script>

<style lang="less" scoped>
.form_con {
    .form_item {
        margin-top: 10px;
        display: flex;

        .form_label {
            color: #333333;
        }

        .form_value {}
    }
}

.textarea-box {
    border: 1px solid #eeeeee;
}

.textarea {
    resize: none;
    border-radius: 10px;

    &::-webkit-scrollbar {
        width: 8px;
        /* 滚动条的宽度 */
        height: 10px;
        /* 滚动条的高度，垂直滚动条可能用得上 */
        display: none;
    }

    &::-webkit-scrollbar-thumb {
        background: #888;
        /* 滑块的背景颜色 */
        border-radius: 10px;
        /* 滑块的圆角 */

    }
}

.tip {
    border: 1px solid #e3e3e3;
    height: 40px;
    padding: 0 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5x;
}

.tip_text {
    border-top: 1px solid #e3e3e3;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    padding-left: 10px;
    // background: pink;
}
</style>
